<template>
  <div class="DiscussItem">
    <div class="headImg"><img src="@/assets/img/find/样图2.png" alt=""></div>
    <div class="commentInf">
        <div class="name">小小冰</div>
        <div class="comments">args萨芬d真naiosJoan啊卡号斯科拉反思好看</div>
        <div class="reply">回复</div>
        <div class="time">1天前</div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'DiscussItem '
}
</script>

<style scoped>
.DiscussItem {
    display: flex;
    margin-top: 20px;

}

/* 头像样式 */
.headImg {
    flex: 1;
}
.headImg img {
    height: 40px;
    border-radius: 25px;
}

/* 评论信息样式 */
.commentInf {
    flex: 5;
    position: relative;
}

.commentInf::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;

    height: 1px;
    width: 100%;
    background-color: #cfcfcf80;
}
/* 评论者名样式 */
.name {
    font-size: small;
    color: #a8a8a8;
}
/* 回复样式 */
.reply {
    padding: 8px;
    font-size: 14px;
    color: #3065a1;
    font-weight: 600;
}
/* 评论时间样式 */
.time {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: smaller;
    color: #a8a8a8;
}
</style>